{include file="common:theader" /}
{include file="common:tside" /}
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
<style>
  .start_time::placeholder,.end_time::placeholder {
    color: black;
  }
  .row{
    display: flex;
    flex-wrap: wrap;
  }
 @media (max-width: 768px){
   .col-sm-3 {
      width: 270px;
  }
 }
 .box{
  width: 110px;
 }
</style>
    <div id="page-wrapper">
      <!-- 舆情日报 -->
      <!--*************************** content部分开始 ******************-->
      <div class="container-fluid" id="m_main">
        <div class="row m-t-20">
          <div class="col-sm-12">
            <div class="white-box">
              <h2 class="box-title m-b-20">课件授权</h2>
              <div class="row">
                <div class="col-sm-8">
                  <div class="form-group">
                    <div class="col-sm-2">
                      <label class="control-label">授权时长：</label>
                    </div>
                    <div class="col-sm-3">
                      <div class="form-group">
                        <div class="input-group">
                          <input id="start_time" type="text" autocomplete="off" name="start" class="form-control input-group-input-date start_time" placeholder="{$start_time}" timeval="{$start_time}" onChange="setStarttime(this)">
                          <span class="input-group-btn input-group-btn-date">
                            <i class="mdi mdi-calendar-text"></i>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-1">
                      
                    </div>
                    <div class="col-sm-3">
                      <div class="form-group">
                        <div class="input-group">
                          <input id="end_time" type="text" autocomplete="off" name="end" class="form-control input-group-input-date end_time" placeholder="{$end_time}" timeval="{$end_time}" onChange="setEndtime(this)">
                          <span class="input-group-btn input-group-btn-date">
                            <i class="mdi mdi-calendar-text"></i>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group">
                    <label class="control-label">课件名称</label>
                  </div>
                  <div id="tree"></div>
                </div>
              </div>
              <div class="row m-t-40">
                <div class="col-sm-8 ta-c">
                  <button type="button" name="" class="btn btn-outline btn-primary m-r-40" @click="doSubmit()">提交</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- /.row -->
      </div>
      <!--*************************** content部分结束 ******************-->

      <!-- <footer class="footer text-center"> 2017 &copy; Ample Admin brought to you by themedesigner.in </footer> -->
    </div>
  {include file="common:js" /}
  {include file="common:footer" /}
  <script src="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
  <script src="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
  <script src="/web/js/edit.js"></script>
  <script src="/web/js/bootstrap-treeview.js"></script>
  <script>
    $(document).ready(function(){
      getTree();
      $('#start_time').datetimepicker({
        autoclose: true,
        // minView: 2,
        // startView: 2,
        // maxView: 4,
        language: "zh-CN",
        format: "yyyy-mm-dd hh:ii"
      });
      $('#end_time').datetimepicker({
        autoclose: true,
        // minView: 2,
        // startView: 1,
        // maxView: 1,
        language: "zh-CN",
        format: "yyyy-mm-dd hh:ii"
      });
    })
    function getTree() {
      var sid = "<?php echo $sid;?>";
      var type = 1;
      $.ajax({
          url: "/dboard/publics/gettree",
          data: {sid:sid,type:type},
          type: "POST",
          dataType: "json",
          success: function(res) {
              $('#tree').treeview({
                data: res.Data, // 获取数据节点
                levels: 3,//节点层级数
                color: "#000",//每一级通用的 节点字体颜色
                backColor: "#fff",//每一级通用的 节点字背景色
                onhoverColor: "orange",//选中浮动颜色
                borderColor: "red",//设置组件的边框颜色; 设置showBorder为false，如果你不想要一个可见的边框
                showBorder: false,
                showTags: true,//是否在每个节点的右侧显示标签。 其值必须在每个节点的数据结构中提供
                multiSelect: true,
                showCheckbox: false,
                highlightSelected: true,//是否突出显示选定的节点
                selectedColor: "#fff",//设置选定节点的前景色
                selectedBackColor: "darkorange",//设置选定节点的背景色
                showTags: true,//是否在每个节点的右侧显示标签。 其值必须在每个节点的数据结构中提供
              });
          }
      });
    }
    function itemOnclick(target){

      var topNode;
      var midNode;
      var butNode;
      var level = $(target).find('.indent');
      var node_id = $(target).attr('data-nodeid');
      var is_selected;
      // 第一级的节点
      if (level.length==0) {
        topNode = $('#tree').treeview('getNode', node_id);
        // 这里获取的是初始状态，click后状态会反转
        is_selected = !topNode.state.selected; 
        for (var i = topNode.nodes.length - 1; i >= 0; i--) {
          // 第二级的节点
          midNode = $('#tree').treeview('getNode', topNode.nodes[i].nodeId);
          // 第二级的节点更新状态
          if (is_selected) {
            $('#tree').treeview('selectNode', [ midNode.nodeId, { silent: true } ]);
          } else {
            $('#tree').treeview('unselectNode', [ midNode.nodeId, { silent: true } ]);
          }
          for (var j = midNode.nodes.length - 1; j >= 0; j--) {
            // 第三级的节点
            butNode = $('#tree').treeview('getNode', midNode.nodes[j].nodeId);
            // 第三级的节点更新状态
            if (is_selected) {
              $('#tree').treeview('selectNode', [ butNode.nodeId, { silent: true } ]);
            } else {
              $('#tree').treeview('unselectNode', [ butNode.nodeId, { silent: true } ]);
            }
          }
        }
      }
      // 第二级的节点
      if (level.length==1) {
        midNode = $('#tree').treeview('getNode', node_id);
        // 这里获取的是初始状态，click后状态会反转
        is_selected = !midNode.state.selected; 
        for (var i = midNode.nodes.length - 1; i >= 0; i--) {
          // 第三级的节点
          butNode = $('#tree').treeview('getNode', midNode.nodes[i].nodeId);
          // 第三级的节点更新状态
          if (is_selected) {
            $('#tree').treeview('selectNode', [ butNode.nodeId, { silent: true } ]);
          } else {
            $('#tree').treeview('unselectNode', [ butNode.nodeId, { silent: true } ]);
          }
        }
      }
    }
    function setStarttime(e) {
      $(e).attr('timeval',$(e).val())
    }
    function setEndtime(e) {
      $(e).attr('timeval',$(e).val())
    }
  </script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#m_main',
      data() {
        return {
          sids: '<?php echo $sid; ?>', // 门店
        }
      },
      mounted() {
      },
      methods: {
        // requestData() {
        //   let that = this;
        //   axios.post('/dboard/courseware/authorize', {id: that.id},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
        //     // console.log(res);
        //     if(res.data.Code == 0){
        //       that.courseware = res.data.Data.courseware;
        //       that.store = res.data.Data.store;
        //       that.courseware = res.data.Data.courseware;
        //     }else{
        //       alert(res.data.Msg)
        //     }
        //   }).catch(err => {
        //     console.log(err);
        //   })
        // },
        // 提交
        doSubmit(){
          var that = this;
          var selectedNode = $('#tree li.node-selected');
          var arr = [];
          $('#tree li.node-selected').each(function(i,j) {
            id = $(j).find('.badge').text();
            arr.push(id)
          })
          var start_time = $('#start_time').attr('timeval');
          var end_time = $('#end_time').attr('timeval');
          var param = {
            course_ids: arr,
            sids: that.sids,
            start_time:start_time,
            end_time:end_time,
          }
          axios.post('/dboard/acourseware/editCoursewareauthorize', param,{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.Code == 0){
              //请求成功
              alert(res.data.Msg);
              window.location.href = '/dboard/Acourseware/authorize_list';
            }else{
              alert(res.data.Msg)
            }
          }).catch(err => {
            console.log(err);
          })
        },
      }
    })
  </script>
  

